<script setup></script>

<template>
  <div>
    <h1>Reg</h1>
    <div class="mb-4">
      <el-button type="primary">Primary</el-button>
      <el-button type="success" @click="btn2">Success</el-button>
      <el-button type="success" @click="btn3">Post Success</el-button>
    </div>
    <p v-for="(artical, index) in list" :key="'artical' + index">
      {{ artical.title }}
    </p>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import $ajax from '../ajax/index.js'

const list = ref([])
const btn2 = async () => {
  const path = '/wxnew/index?key=c65cff44e82fc3b1d27622e80e0a1b6c&num=10'
  const { data: res } = await $ajax.get(path)
  if (res.code === 200) list.value = res.result.list
}

const btn3 = async () => {
  const path = '/wxnew/index/123234'
  const data = {
    num: 20,
    key: 'c65cff44e82fc3b1d27622e80e0a1b6c'
  }
  const { data: res } = await $ajax.post(path, data, {
    //此处代码不需要，因为我们的后端是使用SpringMVC使用 @RequestBody 提取表单数据  对象
    // 否则，需要使用以下配置
    // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  })

  console.log(res)

  if (res.code === 200) list.value = res.result.list
}
</script>
